<!DOCTYPE html>
<html>
<head>
    <title>Upload Image</title>
</head>
<body>
<h2>Upload Image</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" id="image" name="image" accept="image/*" required>
    <input type="text" id="name" name="name" required>
    <input type="text" id="uploaded_by" name="uploaded_by" required>
    <input type="submit" value="Upload">
</form>

<script>
    function compressImage(file, maxWidth, maxHeight) {
        return new Promise((resolve, reject) => {
            let img = new Image();
            img.src = URL.createObjectURL(file);
            img.onload = () => {
                let width = img.width;
                let height = img.height;

                // Find the center of the image
                let centerX = Math.floor(width / 2);
                let centerY = Math.floor(height / 2);

                // Find the size of the square that can be cut from the center
                let squareSize = Math.min(centerX, centerY, maxWidth, maxHeight);

                // Calculate the coordinates of the square
                let squareX = centerX - Math.floor(squareSize / 2);
                let squareY = centerY - Math.floor(squareSize / 2);

                // Create a canvas and draw the square on it
                let canvas = document.createElement('canvas');
                canvas.width = squareSize;
                canvas.height = squareSize;
                let ctx = canvas.getContext('2d');
                ctx.drawImage(img, squareX, squareY, squareSize, squareSize, 0, 0, squareSize, squareSize);

                // Convert the canvas to a blob and resolve the promise
                canvas.toBlob((blob) => {
                    resolve(blob);
                }, 'image/jpeg', 0.8);
            };
            img.onerror = reject;
        });
    }

    document.querySelector('form').addEventListener('submit', function(event) {
        event.preventDefault();
        var image = document.getElementById('image').files[0];
        var reader = new FileReader();
        reader.onloadend = function() {
            var data = reader.result;
            var name = document.getElementById('name').value;
            var uploaded_by = document.getElementById('uploaded_by').value;

//          fetch('https://cnlchrq5g6hen2t5llr0.baseapi.memfiredb.com/rest/v1/images'
            fetch('https://dshmbsawwrbuycnivcjs.supabase.co/rest/v1/images', {
                method: 'POST',
                headers: {
                    //'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                    'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                    //'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzI4NjY4NTY3OSwiaWF0IjoxNzA5ODg1Njc5LCJpc3MiOiJzdXBhYmFzZSJ9.Y3loZqk0iqgFwofs_Sa107YheczRlttX_ZTOMboaf7c',
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImRzaG1ic2F3d3JidXljbml2Y2pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM5Mjg2OTAsImV4cCI6MjA2OTUwNDY5MH0.fwRJD-WuST7mCbJf9h2i2Xk0z6mtCMCeV--JGUecC6A',
                    'Content-Type': 'application/json',
                    'Prefer': 'return=minimal'
                },
                body: JSON.stringify({
                    name: name,
                    data: data,
                    uploaded_by: uploaded_by
                })
            })
            .then(function(response) {
                if (response.ok) {
                    alert('Image uploaded successfully');
                } else {
                    throw new Error('Error: ' + response.statusText);
                }
            })
            .catch(function(error) {
                console.error('Error:', error);
            });
        };

        compressImage(image, 100, 100).then((compressedImage) => {
            reader.readAsDataURL(compressedImage);
            //var base64 = URL.createObjectURL(compressedImage);
        });

    });
</script>

</body>
</html>
